<template>
  <div class="v-module-roomRecord">
    <div class="basic-form">
      <div class="full">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="cardId" label="证件号码" align="center"></el-table-column>
          <el-table-column prop="gender" align="center" label="性别">
            <template slot-scope="scope">{{ extractName('gender', scope.row.gender) }}</template>
          </el-table-column>
          <el-table-column prop="telPhone" align="center" label="联系方式"></el-table-column>
          <el-table-column prop="movePersonType" label="入住人员类型" align="center">
            <template slot-scope="scope">{{ extractName('move_person_type', scope.row.movePersonType) }}</template>
          </el-table-column>
          <el-table-column align="center" prop="dataSource" label="隔离人员来源">
            <template slot-scope="scope">{{ extractName('data_source', scope.row.dataSource) }}</template>
          </el-table-column>
          <el-table-column align="center" prop="moveStartTime" label="入住开始时间"></el-table-column>
          <el-table-column align="center" prop="moveEndTime" label="入住终止时间"></el-table-column>
          <el-table-column align="center" prop="moveDay" label="入住天数"></el-table-column>
          <el-table-column align="center" prop="remark" label="备注"></el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="listPageInfo">
        <pager v-bind="$attrs" hideSelectTips :pageInfo="pageInfo" @changeCurrentPage="changeCurrentPage" @changePageSize="changePageSize" />
      </div>
    </div>
  </div>
</template>

<script>
import { getpageMoveHouseRecordVO } from '@/views/yq-personnel/api/check.js';
import { extractName } from '@/utils/extract';
import pager from '@/components/dataList/components/pager';
export default {
  props: {
    houseData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  components: {
    pager,
  },
  data () {
    return {
      tableData: [],
      pageInfo: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10, // 每页显示多少条
      },
    };
  },
  methods: {
    changePageSize (size) {
      this.pageInfo.current = 1;
      this.pageInfo.size = size;
      this.getpageMoveHouseRecordVO();
    },
    changeCurrentPage (current) {
      this.pageInfo.current = current;
      this.getpageMoveHouseRecordVO();
    },
    async getpageMoveHouseRecordVO () {
      const obj = {
        ...this.pageInfo,
        houseId: this.houseData.houseId,
      };
      const { data } = await getpageMoveHouseRecordVO(obj);
      this.tableData = data.data.records;
      this.pageInfo.total = data.data.total;
    },
    extractName,
  },
  watch: {
    houseData: {
      handler (val) {
        this.getpageMoveHouseRecordVO();
      },
      deep: true,
      immediate: true
    },
  },
};
</script>

<style lang="scss" scoped>
.v-module-roomRecord {
  .listPageInfo {
    margin-top: 10px;
  }
}
</style>
